<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pay.css">
</head>

<body>
    <nav>
        <div class="nav-content">
            <div class="logo">
                <img src="./img/登录/pay.png" alt="">
            </div>
            <div class="nav-msg">
                <div class="nav-msg-1">legochina.cn</div>
                <div class="nav-msg-2">欢迎光临<span class="nav-span">乐购</span>，请&nbsp;<span
                        class="nav-login">登录\</span><span class="nav-span nav-regist">注册</span>
                </div>
            </div>
        </div>
    </nav>
    <main>
        <div class="main-msg">
            <div class="main-msg-1">
                订单提交成功，请尽快付款！&nbsp;订单编号：91000234567
            </div>
            <a href="http://127.0.0.1:5501/settlement.html">订单详情</a>
        </div>
        <div class="main-box">
            <div class="main-msg-2">请您在订单提交<span>24</span>小时内付款，否则将会取消订单</div>
            <div class="main-msg-3"></div>
        </div>
        <div class="main-box-1">
            <div class="main-box-2">乐购支付</div>
            <div class="main-msg-4">以下方式由乐购支付提供</div>
        </div>
        <div class="main-box-3">
            <div class="main-box-4">
                银行卡
                <span>√</span>
            </div>
            <div class="main-box-5">
                <div class="main-msg-5">中国招商银行</div>
                <div class="main-msg-6">网银</div>
                <div class="main-msg-7">最近使用</div>
            </div>
            <div class="main-box-6">添加银行卡&nbsp;+</div>
            <div class="main-msg-8"></div>
        </div>
        <button class="pay">立即支付</button>
        <!-- 立即支付弹窗 -->
        <div id="payModal" class="modal">
            <div class="modal-content">
                <div class="content-top">
                    <div class="sure">支付结果</div>
                    <span class="close">&times;</span>
                </div>
                <div class="content-main">
                    <img src="./img/登录/笑脸.png" alt="">
                    <p>支付完成！</p>
                </div>
                <div class="ok">
                    已完成支付
                </div>
                <div class="content-footer">
                    <button id="cancelPay">确认</button>
                </div>
            </div>
        </div>

        <div class="main-box-7">
            <div class="main-box-8">其他支付</div>
            <div class="main-msg-9">以下方式不支持合并支付</div>
        </div>
        <div class="main-box-9">
            微信支付&nbsp;&nbsp;|&nbsp;&nbsp;中国移动支付&nbsp;&nbsp;|&nbsp;&nbsp;中国银联&nbsp;&nbsp;|&nbsp;&nbsp;外籍内卡&nbsp;&nbsp;|&nbsp;&nbsp;拉卡拉&nbsp;&nbsp;|&nbsp;&nbsp;预约支付卡&nbsp;&nbsp;|&nbsp;&nbsp;乐购钱包扫一扫
        </div>
        <div class="advertise">
            <img src="./img/购物车/广告.png" alt="" style="width: 1200px; height: 90px;">
        </div>
    </main>
    <footer>
        <div class="foot-descri">
            <div class="foot-image">
                <img src="./img/goodsDetail/222_11.png" alt="">
                <img src="./img/goodsDetail/222_13.png" alt="">
                <img src="./img/goodsDetail/222_15.png" alt="">
                <img src="./img/goodsDetail/222_17.png" alt="">
            </div>
        </div>
        <div class="footer-content">
            <div class="foot-center">
                <div class="content-logo">
                    <div class="foot-guide">
                        <div class="guide-content">
                            <span class="h4">购物指南</span>
                            <span>购物流程</span>
                            <span>发票制度</span>
                            <span>账户管理</span>
                            <span>会员优惠</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">支付方式</span>
                            <span>货到付款</span>
                            <span>网上支付</span>
                            <span>礼品卡支付</span>
                            <span>银行卡转账</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">订单服务</span>
                            <span>订单配送查询</span>
                            <span>订单状态说明</span>
                            <span>自助取消订单</span>
                            <span>自助修改订单</span>
                        </div>
                        <div class="guide-content">
                            <span class="h4">退换货</span>
                            <span>退换货政策</span>
                            <span>自助申请退换货</span>
                            <span>退换货进度查询</span>
                            <span>退款方式和时间</span>
                        </div>
                        <div class="guide-content1">
                            <span class="h4">商家服务</span>
                            <span>商家中心</span>
                            <span>运营服务</span>
                            <span>加入尾品汇</span>
                        </div>
                    </div>
                    <div class="foot-logo">
                        <img src="./img/goodsDetail/logo_00.png" alt="">
                    </div>
                </div>
            </div>

            <div class="foot">
                <div class="line1">
                    <span>公司简介</span>
                    <span>|</span>
                    <span>Investor Relations</span>
                    <span>|</span>
                    <span>网站联盟</span>
                    <span>|</span>
                    <span>乐购招商</span>
                    <span>|</span>
                    <span>机构销售</span>
                    <span>|</span>
                    <span>手机乐购</span>
                    <span>|</span>
                    <span>官方Blog</span>
                    <span>|</span>
                    <span>热词搜索</span>
                </div><br>

                <div class="line2">
                    <span>Copyright (C)
                        乐购网 2004-2016，
                        All Rights Reserved
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <script src="./js/pay.js"></script>
</body>

</html>